<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
    <script src="./world.js"></script>

</head>

<body>
    <div style="width:100%;height:800px" id="main"></div>
</body>

</html>
<script type="module">
    import { dataMap } from './dataMap.js'
    import { nameMap } from './nameMap.js'
    let main = document.querySelector('#main')
    let obj = echarts.init(main)
    let option = {
        tooltip: {
            formatter: function (params) {

                return params.componentType = '新冠肺炎感染人数' + '<br/>' + params.data.name + ':' + params.data.value + '人'

            }
        },
        series: [
            {
                // 系列的类型
                type: 'map',
                // 地图类型
                mapType: 'world',
                // 各个国家肺炎感染数据
                data: dataMap,
                // 翻译国家名称
                nameMap: nameMap,
                // 鼠标没有悬浮球时候样式
                itemStyle: {
                    areaColor: '#fffbe5'
                },
                // 鼠标悬浮之后的样式
                emphasis: {
                    itemStyle: {
                        areaColor: 'green'
                    }
                }
            }
        ],
        // 视觉映射
        visualMap: {
            // 切片效果
            type: 'piecewise',
            // 视图映射的宽度
            itemWidth: 50,
            // 视图映射的高度
            itemHeight: 20,
            // 定制样式
            pieces: [
                { min: 0, max: 0, label: 0, color: '#a4eb0b' },
                { min: 1, max: 10, label: '1-10', color: '#ddeb0b' },
                { min: 10, max: 20, label: '10-20', color: '#eba50b' },
                { min: 20, max: 30, label: '20-30', color: '#eb630b' },
                { min: 30, max: 100, label: '30-40', color: '#eb0e0b' },
                { min: 100, label: '>100', color: '#b93e26' },
            ]
        }
    }
    obj.setOption(option)
</script>